<template>
  <div class="detail">
    <!-- 导航栏 -->
    <van-nav-bar class="nav" left-arrow>
      <template #title>
        <div style="color:#fff;font-weight:700">文章详情页</div>
      </template>
      <template #left
        ><van-icon @click="back" name="arrow-left" color="#fff" size="26"
      /></template>
    </van-nav-bar>
    <!-- 文章详情区域 -->
    <div class="wenZhang" v-if="detailList">
      <div class="wzTitle">{{ detailList.title }}</div>
      <div class="wzAuthor">
        <div class="wzAuthorAvatar">
          <img class="wzimg" :src="detailList.aut_photo" alt="" />
        </div>
        <div class="wzAuthorInfo">
          <div class="wzName">{{ detailList.aut_name }}</div>
          <div class="wzTime">{{ detailList.pubdate | hmfilter }}</div>
        </div>
        <van-button
          v-if="detailList.is_followed === false"
          class="wzBtn"
          type="info"
          @click="followed"
          >+ 关注</van-button
        >
        <van-button v-else class="wzBtn" type="info" @click="notFollowed"
          >已关注</van-button
        >
      </div>
      <!-- 文章内容 -->
      <div class="wzContent" v-html="detailList.content"></div>
      <!-- 点赞 不喜欢 -->
      <div class="starAndSick">
        <div
          class="sasStar"
          :style="{
            backgroundColor: isStar ? '#f1400a' : '#eee',
            color: isStar ? '#fff' : 'black'
          }"
          @click="star"
        >
          点赞
        </div>
        <div
          class="sasSick"
          :style="{
            backgroundColor: isDislike ? '#f1400a' : '#eee',
            color: isDislike ? '#fff' : 'black'
          }"
          @click="dislike"
        >
          不喜欢
        </div>
      </div>
      <!-- 评论区域 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多评论了"
        @load="onload"
      >
        <div
          v-show="commentsList.length > 0"
          class="comments"
          v-for="(item, index) in commentsList"
          :key="index"
        >
          <div class="comImgs">
            <img class="comImg" :src="item.aut_photo" alt="" />
          </div>
          <!-- 评论信息 -->

          <div class="comInfo">
            <div class="comAuthor">
              <div class="comAuthorName">{{ item.aut_name }}</div>
              <div class="comAuthorLike">
                <div><van-icon name="like" size="20" /></div>
                <div class="comLikeNum">{{ item.like_count }}</div>
              </div>
            </div>
            <div class="comContent">
              {{ item.content }}
            </div>
            <div class="comBottom">
              <span class="comTime">{{ item.pubdate | hmfilter }}</span
              ><span class="comReplay" @click="replay(item, index)"
                >{{ item.reply_count }} 回复</span
              >
            </div>
          </div>
        </div></van-list
      >
      <!-- 无评论展示区域 -->
      <!-- <div v-show="commentsList.length === 0" class="comNo">暂无评论...</div> -->
    </div>
    <div v-else>文章不存在！</div>
    <!-- 底部评论框 -->
    <div class="bottom">
      <van-cell-group class="bottomInput">
        <van-field v-model="value" placeholder="写评论" />
      </van-cell-group>
      <van-button
        :disabled="value.trim().length === 0"
        class="bottomBtn"
        @click="sendComments"
        type="info"
        >发送</van-button
      >
    </div>
    <!-- 评论回复弹出框 -->
    <van-popup
      class="popup"
      v-model="show"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <!-- 当前评论 -->
      <div class="current">当前评论</div>
      <div class="recomments">
        <div class="recomImgs">
          <img class="recomImg" :src="currentComments.aut_photo" alt="" />
        </div>
        <!-- 评论信息 -->
        <div class="recomInfo">
          <div class="recomAuthor">
            <div class="recomAuthorName">{{ currentComments.aut_name }}</div>
            <div class="recomAuthorLike">
              <div><van-icon name="like" size="20" /></div>
              <div class="recomLikeNum">{{ currentComments.like_count }}</div>
            </div>
          </div>
          <div class="recomContent">
            {{ currentComments.content }}
          </div>
          <div class="recomBottom">
            <span class="recomTime">{{
              currentComments.pubdate | hmfilter
            }}</span>
          </div>
        </div>
      </div>
      <!-- 评论的回复 -->

      <div class="replay">评论的回复</div>
      <div class="plhuifu">
        <div
          class="hfcomments"
          v-for="(item, index) in replyCount"
          :key="index"
        >
          <div class="hfcomImgs">
            <img class="hfcomImg" :src="item.aut_photo" alt="" />
          </div>
          <!-- 评论信息 -->
          <div class="hfcomInfo">
            <div class="hfcomAuthor">
              <div class="hfcomAuthorName">{{ item.aut_name }}</div>
              <div class="hfcomAuthorLike">
                <div><van-icon name="like" size="20" /></div>
                <div class="hfcomLikeNum">{{ item.like_count }}</div>
              </div>
            </div>
            <div class="hfcomContent">
              {{ item.content }}
            </div>
            <div class="hfcomBottom">
              <span class="hfcomTime">{{ item.pubdate | hmfilter }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部评论框 -->
      <div class="bottom">
        <van-cell-group class="bottomInput">
          <van-field v-model="value" placeholder="写评论" />
        </van-cell-group>
        <van-button
          :disabled="value.trim().length === 0"
          class="bottomBtn"
          @click="replyComents"
          type="info"
          >发送</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {
  getDetailApi,
  getCommentsApi,
  starApi,
  dislikeApi,
  sendCommentsApi
} from '../../api/detail'
export default {
  data () {
    return {
      id: '', // 当前文章的id
      replyID: '', // 评论回复的id
      value: '', // 输入框双向绑定
      show: false, // 控制弹出层
      detailList: {}, // 文章详情数据
      commentsList: [], // 用户评论信息
      currentComments: {}, // 当前点击的评论
      replyCount: [], // 评论的回复列表
      //   van-list 需要的数据
      loading: false,
      finished: false,
      offset: undefined,
      // limit: 0,
      // offset: 1,
      autID: '', // 取消关注需要使用的用户id
      isStar: false, // 点赞
      isDislike: false, // 不喜欢
      currenIndex: ''
    }
  },
  computed: { ...mapState(['userInfo']) },
  async created () {
    // 获取id 动态路由取值
    this.id = this.$route.params.artid
    // 调用获取文章详情的方法
    this.getDetail(this.id)
  },
  methods: {
    // 获取文章详情
    async getDetail (id) {
      // 发起请求获取数据
      const res = await getDetailApi(id)
      // console.log(res)
      // 将获得的数据赋值给文章detailList并渲染到页面结构上
      this.detailList = res.data
      // 获得作者id 取消关注需要使用
      this.autID = res.data.aut_id
    },
    // 点击展开弹出层 并且获得回复的评论
    async replay (item, index) {
      // 将当前点击评论的数据赋值给currentComments 渲染到当前评论的结构上
      this.currentComments = item
      // 将当前点击的评论的下标赋值给currenIndex 方便修改commentsList中的数据
      this.currenIndex = index
      // 拿到评论回复的id
      this.replyID = item.com_id.c.join('')
      // console.log(this.replyID)
      // 展开弹出层
      this.show = true
      // 发起请求 获得当前评论的回复评论
      const res = await getCommentsApi({
        source: this.replyID,
        type: 'c'
      })
      // console.log(res)
      // 将获取的数据赋值给replyCount 渲染到评论的回复的结构上
      this.replyCount = res.data.results
    },
    // 发送回复到评论的回复
    async replyComents () {
      // $login--->全局登录校验方法 登录校验 未登录就跳转到登录页面
      if (!this.$login()) {
        return
      }
      // 发起请求 发送评论
      const res = await sendCommentsApi({
        target: this.replyID,
        content: this.value,
        art_id: this.id
      })
      // console.log(res)
      // 将返回的数据添加到评论回复数组的第一个  展示在前面
      this.replyCount.unshift(res.data.new_obj)
      // 将输入框的值清空
      this.value = ''
      // 点击之后 评论数量+1 通过currenIndex得到当前回复的评论 将回复数量+1
      this.commentsList[this.currenIndex].reply_count++
      // 提示评论成功
      this.$toast.success({ message: '评论成功', duration: 500 })
      // 关闭评论弹出层面板
      this.show = false
    },
    // 评论list组件的使用
    async onload () {
      // 发起请求获取文章的评论
      const res = await getCommentsApi({
        source: this.id,
        type: 'a',
        // limit: 10,
        offset: this.offset
      })
      // console.log(res)
      // List组件通过limit固定获取数据数量 通过push方法将数据添加到评论数组的后面 渲染到评论结构上
      this.commentsList.push(...res.data.results)
      // 拿到评论的总量
      this.total = res.data.total_count
      // 拿到评论的最后一个 作为请求下一页数据的offset参数，若本次无具体数据，则值为NULL
      this.offset = res.data.last_id
      this.loading = false
      // console.log(this.total)
      if (this.commentsList.length >= this.total) {
        this.finished = true
      }
    },
    // 关注与取消关注 因为该项目关注与取消关注接口有问题 所以没有发起请求调用接口 只是动态的修改了页面的效果
    followed () {
      if (!this.$login()) {
        return
      }
      this.detailList.is_followed = true
      this.$toast.success({ message: '关注成功', duration: 500 })
    },
    notFollowed () {
      if (!this.$login()) {
        return
      }
      this.detailList.is_followed = false
      this.$toast.success({ message: '已取消关注', duration: 500 })
    },
    // 点赞
    async star () {
      if (!this.$login()) {
        return
      }
      await starApi({ target: this.id })
      this.isStar = !this.isStar
    },
    // 不喜欢
    async dislike () {
      if (!this.$login()) {
        return
      }
      await dislikeApi({ target: this.id })
      this.isDislike = !this.isDislike
    },
    // 发表评论
    async sendComments () {
      if (!this.$login()) {
        return
      }
      // console.log(this.value.trim().length)
      const res = await sendCommentsApi({
        target: this.id,
        content: this.value
      })
      // console.log(res)
      this.commentsList.unshift(res.data.new_obj)
      this.value = ''
      this.$toast.success({ message: '评论成功', duration: 500 })
    },
    // 点击跳转回来时的页面
    back () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  .nav {
    width: 100%;
    background-color: #1989fa;
    position: fixed;
    top: 0;
    left: 0;
  }
  .wenZhang {
    padding: 0 15px;
    margin-top: 80px;
    margin-bottom: 100px;
    .wzTitle {
      margin-top: 20px;
      text-align: center;
      font-size: 18px;
      color: #363333;
      font-weight: 600;
    }
    .wzAuthor {
      display: flex;
      margin-top: 36px;
      .wzAuthorAvatar {
        .wzimg {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .wzAuthorInfo {
        flex: 1;
        margin-left: 10px;
        color: #a1a1a1;
        .wzName {
          font-size: 14px;
        }
        .wzTime {
          margin-top: 4px;
          font-size: 8px;
        }
      }
      .wzBtn {
        width: 80px;
        height: 35px;
        border-radius: 6px;
      }
    }
    .wzContent {
      font-size: 16px;
      word-break: break-all;
      word-wrap: break-word;
      ::v-deep pre {
        overflow: hidden;
        white-space: pre-wrap;
        word-break: break-all;
        word-wrap: break-word;
      }
      ::v-deep table {
        width: 100%;
        // 表格自适应宽度
        table-layout: fixed;
      }
      ::v-deep blockquote {
        overflow: hidden;
        white-space: pre-wrap;
        word-break: break-all;
        word-wrap: break-word;
      }
      ::v-deep img {
        width: 100%;
      }
    }
    .starAndSick {
      display: flex;
      padding: 0 50px;
      margin-top: 36px;
      .sasStar {
        font-size: 14px;
        text-align: center;
        color: #525252;
        padding: 5px 20px;
        border: 1px solid #a3a3a3;
        border-radius: 30px;
      }
      .sasSick {
        font-size: 14px;
        text-align: center;
        color: #525252;
        margin-left: 60px;
        padding: 5px 20px;
        border: 1px solid #a3a3a3;
        border-radius: 30px;
      }
    }
    .comments {
      display: flex;
      margin-top: 30px;
      .comImgs {
        .comImg {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .comInfo {
        flex: 1;
        margin-left: 10px;
        .comAuthor {
          display: flex;
          .comAuthorName {
            flex: 1;
            font-size: 14px;
            color: #a1a1a1;
          }
          .comAuthorLike {
            display: flex;
            // flex-direction: column;
            .comLikeNum {
              font-size: 14px;
              color: #a1a1a1;
              margin-left: 6px;
              margin-top: 3px;
            }
          }
        }
      }
      .comContent {
        font-size: 16px;
        color: #484440;
        word-break: break-all;
        word-wrap: break-word;
      }
      .comBottom {
        .comTime {
          // margin-top: 4px;
          font-size: 8px;
          color: #c5afa5;
        }
        .comReplay {
          font-size: 8px;
          border-radius: 10px;
          background-color: #e4e4e4;
          padding: 3px 10px;
          margin-left: 20px;
        }
      }
    }
    .comNo {
      text-align: center;
      font-size: 16px;
      margin-top: 20px;
    }
  }
  .bottom {
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: 15px 10px;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    .bottomInput {
      flex: 1;
      width: 260px;
      height: 30px;
      border: 1px solid black;
      ::v-deep .van-cell {
        height: 30px;
        padding: 0;
        .van-field__body {
          height: 30px;
        }
      }
    }
    .bottomBtn {
      margin-left: 10px;
      margin-right: 15px;
      height: 30px;
      border-radius: 6px;
    }
  }
  .popup {
    // margin-bottom: 60px;
    box-sizing: border-box;
    .current {
      font-size: 16px;
      padding: 5px 15px;
      border-bottom: 2px solid #d2d2d2;
    }
    .replay {
      font-size: 16px;
      padding: 5px 15px;
      border-bottom: 2px solid #d2d2d2;
      margin-top: 20px;
    }
    .plhuifu {
      margin-bottom: 70px;
      .hfcomments {
        display: flex;
        margin-top: 10px;
        padding: 0 15px;
        .hfcomImgs {
          .hfcomImg {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
        .hfcomInfo {
          flex: 1;
          margin-left: 10px;
          .hfcomAuthor {
            display: flex;
            .hfcomAuthorName {
              flex: 1;
              font-size: 14px;
              color: #a1a1a1;
            }
            .hfcomAuthorLike {
              display: flex;
              // flex-direction: column;
              .hfcomLikeNum {
                font-size: 14px;
                color: #a1a1a1;
                margin-left: 6px;
                margin-top: 3px;
              }
            }
          }
        }
        .hfcomContent {
          font-size: 16px;
          color: #484440;
          word-break: break-all;
          word-wrap: break-word;
        }
        .hfcomBottom {
          .hfcomTime {
            // margin-top: 4px;
            font-size: 8px;
            color: #c5afa5;
          }
          .hfcomReplay {
            font-size: 8px;
            border-radius: 10px;
            background-color: #e4e4e4;
            padding: 3px 10px;
            margin-left: 20px;
          }
        }
      }
    }
    .recomments {
      display: flex;
      margin-top: 10px;
      padding: 0 15px;
      // margin-bottom: 70px;
      .recomImgs {
        .recomImg {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .recomInfo {
        flex: 1;
        margin-left: 10px;
        .recomAuthor {
          display: flex;
          .recomAuthorName {
            flex: 1;
            font-size: 14px;
            color: #a1a1a1;
          }
          .recomAuthorLike {
            display: flex;
            // flex-direction: column;
            .recomLikeNum {
              font-size: 14px;
              color: #a1a1a1;
              margin-left: 6px;
              margin-top: 3px;
            }
          }
        }
      }
      .recomContent {
        font-size: 16px;
        color: #484440;
        word-break: break-all;
        word-wrap: break-word;
      }
      .recomBottom {
        .recomTime {
          // margin-top: 4px;
          font-size: 8px;
          color: #c5afa5;
        }
        .recomReplay {
          font-size: 8px;
          border-radius: 10px;
          background-color: #e4e4e4;
          padding: 3px 10px;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
